<template>
  <div class="common_page">
    <div ref="mainContent" class="main_content">
      <div class="main_content_top">
        <div class="main_content_top_block main_content_top_right">
          <div class="main_content_top_right_right">
            <el-image :src="autorImg" style="width:64px;height: 80px;"></el-image>
            <div class="main_content_top_right_info">
              <div class="main_content_top_right_name">{{ topLeftInfo.name || '-' }}</div>
              <div class="main_content_top_right_job">岗位：{{ topLeftInfo.job || '-' }}</div>
            </div>
          </div>
          <div class="main_content_top_right_left">
            <div v-for="(item, index) in leftTopdata" :key="index" class="main_content_top_right_left_block">
              <div class="top_right_left_tips">{{ item.name }}</div>
              <div class="top_right_left_content">
                <div class="top_right_left_num">{{ item.num }}</div>
                <div class="top_right_left_unit">{{ item.unit }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="main_content_top_block main_content_top_left">
          <div class="main_content_bottom_title" style="margin-bottom:0px">绩效考核</div>
          <div class="main_content_top_left_right">
            <div v-for="(item, index) in assessmentList" :key="index" class="main_content_top_right_left_block">
              <div class="top_right_left_tips">{{ item.name }}</div>
              <div class="top_right_left_content">
                <div class="top_right_left_num">{{ item.value }}</div>
                <div class="top_right_left_unit">分</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main_content_chart">
        <div class="main_content_chart_common">
          <div class="main_content_bottom_title">总达成率</div>
          <div ref="total_achievement_rate" style="width: 100%;height: 176px"/>
        </div>
        <div class="main_content_chart_common">
          <div class="main_content_bottom_title">总通过率</div>
          <div ref="total_pass_rate" style="width: 100%;height: 176px"/>
        </div>
        <div class="main_content_chart_common">
          <div class="main_content_bottom_title">前5大不良</div>
          <div ref="workers_number" style="width: 100%;height: 176px"/>
          <!-- <div class="special_chart">

            <div class="common_data_right">
              <div class="common_data_single" v-for="(item,index) in pieEquipentY" :key="index">
                <div>{{ (item.value/109*100).toFixed(2) }}%</div>
              </div>
            </div>
          </div> -->

        </div>
        <div class="main_content_chart_common">
          <div class="main_content_bottom_title">时段生产</div>
          <div ref="time_period" style="width: 100%;height: 176px"/>
        </div>
      </div>
      <div class="main_content_center">
        <div class="main_content_bottom_title">生产任务</div>
        <div class="energy_medium_center_top">
          <div v-for="(item, index) in pageCenterList" :key="index" class="center_top_single">
            <div class="center_top_single_order_num">订单号：{{ item.orderNumber || '-' }}</div>
            <div class="center_top_single_complete">
              <div class="center_top_single_complete_head">
                <div>完成情况</div>
                <div>{{ item.totalNumber }}/{{ item.doneNumber }}</div>
              </div>
              <el-progress :percentage="item.percentage" :stroke-width="12"></el-progress>
            </div>
            <div class="center_top_single_common_box">
              <div class="common_box_name">批次号：</div>
              <div class="common_box_value">{{ item.batchNumber || '-' }}</div>
            </div>
            <div class="center_top_single_common_box">
              <div class="common_box_name">分段号：</div>
              <div class="common_box_value">{{ item.subsectionNumber || '-' }}</div>
            </div>
            <div class="center_top_single_common_box">
              <div class="common_box_name">厂区：</div>
              <div class="common_box_value">{{ item.factory || '-' }}</div>
            </div>
            <div class="center_top_single_common_box">
              <div class="common_box_name">规格：</div>
              <div class="common_box_value">{{ item.specification || '-' }}</div>
            </div>
            <div class="center_top_single_common_box">
              <div class="common_box_name">时长：</div>
              <div class="common_box_value">{{ item.duration || '-' }}H</div>
            </div>
          </div>
        </div>
        <div v-if="totalPage>0" class="page_wrapper">
          <el-pagination
              :page-size="searchTemData.pageSize"
              :page-sizes="[4, 10, 20]"
              :total="totalPage"
              layout="prev, pager, next,sizes, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="main_content_bottom">
        <div class="main_content_bottom_title">生产详情</div>
        <sysTable
            :columns="centerColumns"
            :data="centerTableData"
            :page-size="searchData.pageSize"
            :show-pagination="true"
            :total-page="dataTotal"
            @currentChange="currentChange"
            @sizeChange="sizeChange"
        >
          <template #state="scope">
            <div :class="jumpClass(scope.scope.row.state)">{{ jumpState(scope.scope.row.state) }}</div>
          </template>
        </sysTable>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Ntitle from '../components/Title'
import sysTable from '../components/SysTable'
import {getDetailProduct, getDetailInfo, getDetailTaskList, getDetailRightData} from '../api/product/index'

export default {
  name: 'energyReport',
  components: {
    Ntitle,
    sysTable
  },
  data() {
    return {
      waterStatisticsY: [],
      passY: [],
      waterStatisticsX: ['上月', '本月'],
      pieEquipentL: [],
      pieEquipentY: [
        {
          value: 12,
          name: '数控人员'
        },
        {
          value: 22,
          name: '操作人员'
        },
        {
          value: 31,
          name: '保养人员'
        },
        {
          value: 44,
          name: '维修人员'
        }
      ],
      centerColumns: [
        {
          label: '任务编号',
          prop: 'number',
          minWidth: '220',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '任务名称',
          prop: 'name',
          minWidth: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '任务分类',
          prop: 'classifyName',
          minWidth: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '关联计划',
          prop: 'planNumber',
          minWidth: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '任务模板',
          prop: 'templateName',
          minWidth: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '执行人',
          prop: 'operatorId',
          minWidth: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '状态',
          prop: 'state',
          minWidth: '180',
          align: 'center',
          showOverflowTooltip: true
        },
      ],
      dataTotal: 0,
      centerTableData: [],
      totalPage: 0,
      pageCenterList: [],
      searchTemData: {
        pageSize: 4,
        currPage: 1
      },
      searchData: {
        pageSize: 10,
        currPage: 1
      },
      autorImg: require('@/assets/images/profile.jpg'),
      leftTopdata: [
        {
          name: '计划数量：',
          num: 0,
          unit: '个'
        },
        {
          name: '完工数量',
          num: 0,
          unit: '个'
        },
        {
          name: '总达成率',
          num: 0,
          unit: '%'
        },
        {
          name: '总通过率',
          num: 0,
          unit: '%'
        },
      ],
      topLeftInfo: {
        name: '',
        job: ''
      },
      pageUserId: '',
      assessmentList: [], // 绩效考核
      timePeriodX: [], // 时段生产X轴
      timePeriodY: [], // 时段生产Y轴
    }
  },
  mounted() {
    this.pageUserId = this.$route.query.userId || ''
    this.getTableList()
    this.getPageInfo()
    this.getTabledata()
    this.getDetailRightData()

  },
  methods: {
    getPageInfo() {
      const obj = {
        userId: this.pageUserId
      }
      getDetailInfo(obj).then(res => {
        if (res.code == 200) {
          if (res.data.imgUrl) {
            this.autorImg = res.data.imgUrl
          }
          this.topLeftInfo.name = res.data.userName
          this.topLeftInfo.job = res.data.post
          this.leftTopdata[0].num = res.data.planNumber
          this.leftTopdata[1].num = res.data.complete
          this.leftTopdata[2].num = res.data.achievement
          this.leftTopdata[3].num = res.data.passing
          this.passY = []
          this.passY.push(res.data.passingLast)
          this.passY.push(res.data.passingMonth)
          this.waterStatisticsY = []
          this.waterStatisticsY.push(res.data.achievementLast)
          this.waterStatisticsY.push(res.data.achievementMonth)
          this.initTotalAchievementRate()
          this.initTotalPassRate()
        } else {
          this.$message.error("数据请求失败，请联系管理员");
        }
      })
    },
    getTableList() {
      const obj = {
        userId: this.pageUserId,
        ...this.searchTemData
      }
      getDetailProduct(obj).then(res => {
        this.pageCenterList = res.data.list || []
        this.totalPage = res.data.total || 0
      })
    },
    getTabledata() {
      const obj = {
        userId: this.pageUserId,
        ...this.searchData
      }
      getDetailTaskList(obj).then(res => {
        this.dataTotal = res.data.total || 0
        this.centerTableData = res.data.list || []
      })
    },
    getDetailRightData() {
      const obj = {
        userId: this.pageUserId
      }
      getDetailRightData(obj).then(res => {
        console.log(res, '右侧数据')
        this.assessmentList = []
        this.timePeriodY = []
        this.pieEquipentY = []
        this.pieEquipentL = Object.keys(res.data.unqualified)
        this.timePeriodX = Object.keys(res.data.timeProduction)
        const arr1 = Object.keys(res.data.evaluation)
        arr1.map(item => {
          this.assessmentList.push({
            name: item,
            value: res.data.evaluation[item]
          })
        })
        this.timePeriodX.map(item => {
          this.timePeriodY.push(res.data.timeProduction[item])
        })
        this.initTimePeriod()

        this.pieEquipentL.map(item => {
          const obj = {
            value: res.data.unqualified[item],
            name: item
          }
          this.pieEquipentY.push(obj)
        })
        this.initWorkersNumber()
      })
    },
    sizeChange(val) {
      this.searchData.pageSize = val
      this.getTabledata()
    },
    currentChange(val) {
      this.searchData.currPage = val
      this.getTabledata()
    },
    handleSizeChange(val) {
      this.searchTemData.pageSize = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.searchTemData.currPage = val
      this.getTableList()
    },
    initTotalAchievementRate() {
      const myEcharts = echarts.init(this.$refs.total_achievement_rate);
      myEcharts.setOption({
        color: ['#5e90f6', '#5ed8a7', '#5e7091', '#f5bc2e'],
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.waterStatisticsX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: [
              {
                value: this.waterStatisticsY[0],
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 1, color: "#85E0B2"},
                    {offset: 0, color: "#33CC7F"}
                  ])
                }
              },
              {
                value: this.waterStatisticsY[1],
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 1, color: "#98CBFF"},
                    {offset: 0, color: "#3399FF"}
                  ])
                }
              }
            ]
          },
        ]
      })
      this.charts1 = false
    },
    initTotalPassRate() {
      const myEcharts = echarts.init(this.$refs.total_pass_rate);
      myEcharts.setOption({
        color: ['#5e90f6', '#f5bc2e', '#5e7091', '#f5bc2e'],
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.waterStatisticsX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: [
              {
                value: this.passY[0],
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 1, color: "#85E0B2"},
                    {offset: 0, color: "#33CC7F"}
                  ])
                }
              },
              {
                value: this.passY[1],
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 1, color: "#98CBFF"},
                    {offset: 0, color: "#3399FF"}
                  ])
                }
              }
            ]
          },
        ]
      })
      this.charts1 = false
    },
    initWorkersNumber() {
      const myEcharts = echarts.init(this.$refs.workers_number);
      myEcharts.setOption({
        color: ["#FF7433", "#FC7878", "#C899FF", "#00D073", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          data: this.pieEquipentL,
          orient: 'vertical',
          right: 15,
          top: 25,
          bottom: 20,
          padding: [0, 0, 5, 0],
          itemGap: 15,
          itemHeight: 10,
          itemWidth: 10,
          icon: 'rect',
          textStyle: {
            color: '#333',
            fontSize: '14px'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '75%'],
            center: ['30%', '50%'],
            // selectedMode: 'single',
            data: this.pieEquipentY,
            label: {
              show: false,
              color: '#606266',
              fontSize: '12px'
            },
            labelLine: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }, true)
    },
    initTimePeriod() {
      const myEcharts = echarts.init(this.$refs.time_period);
      myEcharts.setOption({
        color: ['#5e90f6', '#f5bc2e', '#5e7091', '#f5bc2e'],
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {a} : {c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.timePeriodX,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#606266',
                fontSize: '12px'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: this.timePeriodY,
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 1, color: "#98CBFF"},
                    {offset: 0, color: "#3399FF"}
                  ], false)
                }
              }
            }
          },
        ]
      })
      this.charts1 = false
    },
    jumpState(val) {
      switch (val) {
        case 1:
          return '待处理'
        case 2:
          return '处理中'
        case 3:
          return '已完成'
        case 4:
          return '部分完成'
        default:
          return '-'
      }
    },
    jumpClass(val) {
      switch (val) {
        case 1:
          return 'waits'
        case 2:
          return 'processs'
        case 3:
          return 'completes'
        case 4:
          return 'completes'
        default:
          return ''
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.common_page {
  height: 100%;
  width: 100%;
  background: #f3f4f5;
  overflow: auto;
}

.main_content {
  width: 100%;
  height: 100%;
  // background: #fff;
  padding: 20px;

  .main_content_head {
    margin-bottom: 30px;
  }
}

.main_content_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  .main_content_top_block {
    width: 49.5%;
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
    border-radius: 8px 8px 8px 8px;
  }

  .main_content_top_right {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .main_content_top_right_right {
      display: flex;
      align-items: center;

      .main_content_top_right_info {
        margin-left: 20px;

        .main_content_top_right_name {
          color: #000;
          line-height: 40px;
          font-size: 26px;
          font-weight: bold;
          margin-bottom: 4px;
        }

        .main_content_top_right_job {
          color: #666;
          line-height: 24px;
          font-size: 16px;
        }
      }
    }

    .main_content_top_right_left {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .main_content_top_right_left_block {
        width: 120px;
        height: 84px;
        background: #F7F8F9;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-right: 10px;

        .top_right_left_tips {
          font-size: 14px;
          color: #666;
          line-height: 20px;
        }

        .top_right_left_content {
          display: flex;
          align-items: flex-end;

          .top_right_left_num {
            color: #000;
            font-size: 26px;
            font-weight: bold;
          }

          .top_right_left_unit {
            color: #333;
            font-size: 14px;
            line-height: 23px;
          }
        }
      }

      .main_content_top_right_left_block:last-of-type {
        margin-right: 0px;
      }

    }

  }

  .main_content_top_left {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .main_content_top_left_right {
      display: flex;
      align-items: center;
    }

    .main_content_top_right_left_block {
      width: 104px;
      height: 84px;
      background: #F7F8F9;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-right: 10px;

      .top_right_left_tips {
        font-size: 14px;
        color: #666;
        line-height: 20px;
      }

      .top_right_left_content {
        display: flex;
        align-items: flex-end;

        .top_right_left_num {
          color: #000;
          font-size: 26px;
          font-weight: bold;
        }

        .top_right_left_unit {
          color: #333;
          font-size: 14px;
          line-height: 23px;
        }
      }
    }

    .main_content_top_right_left_block:last-of-type {
      margin-right: 0px;
    }
  }

}

.main_content_chart {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .main_content_chart_common {
    width: 24%;
    height: 266px;
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
    border-radius: 8px 8px 8px 8px;
  }
}

.main_content_center {
  padding: 20px;
  background: #fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 10px;

  .energy_medium_center_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .center_top_single {
      width: 24%;
      height: 296px;
      box-sizing: border-box;
      padding: 20px;
      background: #FFFFFF;
      border: 1px solid rgba(0, 0, 0, 0.08);

      .center_top_single_order_num {
        font-size: 16px;
        line-height: 24px;
        color: #333;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .center_top_single_complete {
        width: 100%;
        height: 64px;
        border-radius: 4px;
        background: #f3f4f5;
        box-sizing: border-box;
        padding: 10px;
        margin-bottom: 20px;

        .center_top_single_complete_head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #333;
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 8px;
        }
      }

      .center_top_single_common_box {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        margin-bottom: 4px;
        font-size: 14px;
        color: #333;

        .common_box_name {
          color: #999;
          width: 64px;
        }
      }

      .center_top_single_common_box:last-of-type {
        margin-bottom: 0px;
      }
    }
  }
}


.main_content_bottom {
  padding: 20px;
  background: #fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px 8px 8px 8px;

}

::v-deep.el-progress {
  .el-progress-bar {
    margin-right: -45px;
    padding-right: 45px;
  }

  .el-progress__text {
    font-size: 14px !important;
    color: #333;
  }
}

.page_wrapper {
  margin-bottom: 10px;
}

::v-deep.el-pagination {
  padding: 0px;

  .btn-prev, .btn-next {
    width: 28px;
    height: 28px;
    padding: 0px;
    background: #fff;
    border-radius: 4px 4px 4px 4px;
  }

  .el-pager {
    margin: 0 8px;

    .number {
      width: 28px;
      height: 28px;
      padding: 0px;
      margin-right: 8px;
      color: #666;
      font-size: 14px;
      line-height: 28px;
      border-radius: 4px 4px 4px 4px;
      background: #fff;
    }

    .number:last-of-type {
      margin-right: 0px;
    }

    .active {
      background: #3399FF;
      color: #fff;
    }
  }
}

.main_content_bottom_title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #000;
  margin-bottom: 20px;
}

.processs {
  width: 58px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: rgba(255, 119, 51, 0.1);
  border-radius: 4px 4px 4px 4px;
  color: #FF7733;
  font-size: 14px;
  margin: 0 auto;
}

.waits {
  width: 58px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: rgba(51, 153, 255, 0.1);
  border-radius: 4px 4px 4px 4px;
  color: #3399FF;
  font-size: 14px;
  margin: 0 auto;
}

.completes {
  width: 58px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: rgba(0, 178, 74, 0.1);
  border-radius: 4px 4px 4px 4px;
  color: #00B24A;
  font-size: 14px;
  margin: 0 auto;
}

.special_chart {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .common_data_right {
    width: 25%;

    .common_data_single {
      width: 100%;
      text-align: right;
      color: #333;
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 25px;
    }

    .common_data_single:last-of-type {
      margin-bottom: 0px;
    }
  }
}
</style>
